<template>
    <!-- 子组件 -->
    <div class="goods">
        <h3>{{title}}</h3>
        <p>{{price}}</p>
        <p>{{desc}}</p>
        <button @click='cutPrice(id)'>砍一刀--{{id}}</button>
    </div>
</template>

<script>
export default {
    name:'MyProduct',
    props:['title', 'price', 'desc','id'],
    methods:{
        cutPrice(id){
            // 不能再子组件中去修改父组件穿过来的props值
            // 数据流向 ==> 从父组件，到子组件
            // this.price = this.price - 10

            //  如果自组件想要修改父组件传的数据
            // 怎么办呢，通知父组件，让父组件自己去修改这个数据
            // 1. 第一个参数，子组件自定义的事件名，这个事件会在组件注册监听
            // 2. 第二个参数，要传递给父组件的参数（信息）
            
            // 如果要给对应的那个对象砍一刀，可以给一个id标识
            this.$emit('cutPrice', 10, id)

            // this.$emit('changePrice', 10)
        }
    }
}
</script>
<style scoped>
.goods{
    border:1px solid skyblue;
    width: 300px;
    height: 200px;
}
</style>